Page Menuにボタンを追加する
UserScriptを使うと、Page Menuに独自のボタンを追加することができる
API Reference
ボタンを追加する
scrapbox.PageMenu.addMenu()を使う
実行すると、div.page-menuに新しいボタンが追加される
例
code:js
scrapbox.PageMenu.addMenu({
title: 'NewButton',
image: 'https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png',
onClick: () => alert('Hello, Scrapbox!'),
});
title (必須)
マウスをホバーしたときに出てくるtooltipの文字になる
ボタンのHTML要素のidにもなる
image (必須)
icon
imageの方が優先される
kamon kamon-playのように指定する
onClick (option)
ボタンを押したときに実行する関数
ボタンを削除する
できないようだ
scrapbox.PageMenu().reset()を使う
これを実行したあとに該当ボタンを押すと消える
ボタンの中にメニューを追加する
scrapbox.PageMenu().addItem()を使う
仕切り線を追加する
scrapbox.PageMenu().addSeparator()を使う
例
code:js
scrapbox.PageMenu.addMenu({
title: 'NewButton',
image: 'https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png',
});
scrapbox.PageMenu('NewButton').addItem({
title: 'NewButton',
image: 'https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png',
onClick: () => alert('Hello, Scrapbox!'),
});
scrapbox.PageMenu('NewButton').addSeparator();
scrapbox.PageMenu('NewButton').addItem({
title: 'NewButton',
onClick: () => alert('Hello, Scrapbox!'),
});
scrapbox.PageMenu('NewButton').addSeparator();
scrapbox.PageMenu('NewButton').addSeparator();
実行結果
https://gyazo.com/44184c9e00621e5e26d3618cc2f38420
ボタンの中のメニューをすべて消す
scrapbox.PageMenu().removeAllItems()を使う
仕切り線も消える
実行しただけでは反映されない
反映するにはscrapbox.PageMenu().emitChange()を実行する必要がある
なくなったっぽい?
PageMenuへの変更を反映する
PageMenuのボタンをクリックする
仕組みはよくわからない
scrapbox.PageMenu().emitChange()を使う
PageMenu(id)で指定したものだけでなく、すべてのボタンの中身の変更が反映される模様
以下では内部で実行される
scrapbox.PageMenu.addMenu()
scrapbox.PageMenu().addItem()
scrapbox.PageMenu().addSeparator()
以下では内部で実行されない
scrapbox.PageMenu().removeAllItems()
scrapbox.PageMenu().reset()
その他のAPI
scrapbox.PageMenu().menuName
ボタンの名前
scrapbox.PageMenu().menus
すべてのPage menuのボタンの情報